
<template>
  <div class="ActivityDetail" v-if="data.activityId">
    <div class="msg">
      <div class="item">
        <div class="label">活动标题: </div>
        <div class="value">{{ data.title }}</div>
      </div>
      <div class="item">
        <div class="label">活动状态: </div>
        <div class="value">{{ data.status }}</div>
      </div>

      <div class="item">
        <div class="label">邀约名单: </div>
        <div class="value">{{ data.ableUsers }}</div>
      </div>
      <div class="item">
        <div class="label">活动描述: </div>
        <div class="value">
          <pre class="content" v-html="data.context" />
        </div>
      </div>
      <div class="item">
        <div class="label">活动时间: </div>
        <div class="value">{{ data.startTime }}</div>
      </div>
      <div class="item">
        <div class="label">活动地址: </div>
        <div class="value">{{ data.address }}</div>
        <div class="map-wrap">
          <map
            class="map"
            :longitude="data.longitude"
            :latitude="data.latitude"
            :markers="[{
              id: 0,
              latitude: data.latitude,
              longitude: data.longitude,
            }]"
            :enable-scroll="false"
            @click="handleMapClick"
          />
        </div>
      </div>
      <div class="item">
        <div class="label">主办单位: </div>
        <div class="value">{{ data.workName }}</div>
      </div>
      <div class="item">
        <div class="label">联系人: </div>
        <div class="value">{{ data.contacts }}</div>
      </div>
      <div class="item">
        <div class="label">附件: </div>
        <div class="value">
          {{ uploadFileId.length?'': '无' }}
          <div class="file-list">
            <div
              class="file-item"
              v-for="item in data.uploadFileId"
              :key="item.path"
              @click="handleViewFile(item)"
            >
              <span class="text">{{ item.name }}</span>
              <i class="iconfont iconClouddownloadstorage"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="label">二维码: </div>
        <div class="value">
          <img class="qr-code" :src="data.signInQr" mode="aspectFit" @click="handleImg(data.signInQr)">
        </div>
      </div>
    </div>
    <div class="footer" v-if="data.nextNode">
      <div
        class="btn-wrap"
        v-for="item in data.nextNode"
        :key="item.code">
        <div
          v-if="item.hasNext"
          class="btn"
          hover-class="hover"
          hover-start-time="0"
          hover-stay-time="0"
          @click="handleNext(item)">{{ item.name }}</div>
        <div v-else class="btn status">{{ item.name }}</div>
      </div>
    </div>
    <van-notify
      ref="notify"
      :message="notifyConfig.message"
      :top="notifyConfig.top"
      :type="notifyConfig.type"
    />
    <CommonConfirmModel ref="CommonConfirmModel" />
    <CommonConfirmModel ref="CommonConfirmModelLeave">
      <div class="form">
        <CommonFormCreate v-model="leaveForm" :options="leaveOptions" />
      </div>
    </CommonConfirmModel>
    <CommonConfirmModel ref="CommonConfirmModelReissue">
      <div class="form">
        <CommonFormCreate v-model="reissueForm" :options="reissueOptions" />
      </div>
    </CommonConfirmModel>
    <CommonTips ref="CommonTips" />

  </div>
</template>

<script>
import api from '@/api'
import openLocation from '@/utils/openLocation'
import CommonConfirmModel from '@/components/CommonConfirmModel'
import CommonFormCreate from '@/components/CommonFormCreate'
import TYPE from '@/components/CommonFormCreateType'
import CommonTips from '@/components/CommonTips'

export default {
  components: {
    CommonConfirmModel,
    CommonFormCreate,
    CommonTips,
  },
  data () {
    return {
      data: {},
      notifyConfig: {
        type: 'success',
        message: '',
      },
      leaveForm: {
        remark: '',
      },
      leaveOptions: [
        {
          title: '请假原因',
          type: TYPE.INPUT,
          field: 'remark',
          placeholder: '请输入请假原因',
          width: '140px',
        },
      ],
      reissueForm: {
        signInTime: '',
        signOutTime: '',
        remark: '',
      },
      reissueOptions: [
        {
          title: '签到时间',
          type: TYPE.DATE_SELECT,
          field: 'signInTime',
          placeholder: '请选择签到时间',
          width: '162px',
        },
        {
          title: '签退时间',
          type: TYPE.DATE_SELECT,
          field: 'signOutTime',
          width: '162px',
          placeholder: '请选择签退时间',
        },
        {
          title: '备注',
          type: TYPE.TEXTAREA,
          field: 'remark',
          placeholder: '请输入补签说明',
          width: '162px',
          placeholdeStyle: 'font-size: 12px; color: #999',
        },
      ],
    }
  },
  onLoad (option) {
    this.id = option.id
  },
  onShow () {
    this.getData()
  },
  onShareAppMessage () {
    return {
      title: this.data.title,
      imageUrl: '',
      query: {
        id: this.id,
      },
    }
  },
  methods: {
    async getData () {
      const { result } = await api.getActivityDetail({ id: this.id })
      this.data = result
    },
    handleMapClick () {
      openLocation(this.data.latitude, this.data.longitude, '活动地点', this.data.address)
    },
    async handleNext (item) {
      const code = parseInt(item.code)
      if ([5, 7].includes(code)) {
        uni.navigateTo({
          url: `/pages/activitySign/index?id=${this.id}`,
        })
      } else if (code === 2) {
        this.$refs.CommonConfirmModelLeave.$show({
          title: '你确定该活动需要请假吗？',
          ok: async () => {
            await api.activityNext({
              activityId: this.data.activityId,
              joinId: this.data.joinId,
              nextStepCode: item.code,
              ...this.leaveForm,
            })
            this.$refs.CommonTips.$show({
              title: '你已在成功申请请假，请等候管理员审批!',
            })
            this.getData()
          },
        })
      } else if (code === 9) {
        this.$refs.CommonConfirmModelReissue.$show({
          title: '你确定该活动需要补签吗？',
          ok: async () => {
            await api.activityNext({
              activityId: this.data.activityId,
              joinId: this.data.joinId,
              nextStepCode: item.code,
              ...this.reissueForm,
              signInTime: this.reissueForm.signInTime ? new Date(this.reissueForm.signInTime).getTime() : '',
              signOutTime: this.reissueForm.signOutTime ? new Date(this.reissueForm.signOutTime).getTime() : '',
            })
            this.$refs.CommonTips.$show({
              title: '你已经成功申请补签，请等候管理员审批！',
            })
            this.getData()
          },
        })
      } else {
        this.$refs.CommonConfirmModel.$show({
          title: `你确定该活动需要${item.name}吗？`,
          ok: async () => {
            await api.activityNext({
              activityId: this.data.activityId,
              joinId: this.data.joinId,
              nextStepCode: item.code,
              ...this.leaveForm,
            })
            this.$refs.CommonTips.$show({
              title: `完成${item.name}`,
            })
            this.getData()
          },
        })
      }
    },
    handleViewFile (file) {
      wx.showLoading()
      wx.downloadFile({
        url: file.showPath,
        success ({ tempFilePath }) {
          wx.hideLoading()
          wx.openDocument({
            filePath: tempFilePath,
            showMenu: true,
            fileType: file.name.split('.')[1],
            fail (e) {
              console.log('openDocument fail', e)
              uni.showModal({
                title: '错误',
                showCancel: false,
              })
            },
          })
        },
        fail () {
          wx.hideLoading()
          uni.showModal({
            title: '错误',
            showCancel: false,
          })
        },
      })
    },
    handleImg (src) {
      wx.previewImage({
        current: src,
        urls: [src],
      })
    },
    notify (message) {
      this.notifyConfig.message = message
      this.$refs.notify.show()
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.ActivityDetail {
	min-height: 100vh;
	padding: 0 15px;
	background: #fff;

	.msg {
		.item {
			display: flex;
			flex-wrap: wrap;
			padding: 10px 0;
			border-bottom: 1px solid #e6e6e6;
			line-height: 26px;
			font-size: $fz-l;

			.label {
				color: #333;
			}

			.value {
				margin-left: 10px;
				color: #999;
			}

			.qr-code {
				height: 100px;
			}

			.map-wrap {
				.map {
					width: 700rpx;
					height: 400rpx;
				}
			}

			.file-list {
				.file-item {
					display: flex;
					align-items: center;
					margin-bottom: 8px;
					font-size: $fz-l;

					.text {
						margin-right: 5px;
						text-decoration: underline;
					}
				}
			}
		}
	}

	.footer {
		display: flex;

		.btn-wrap {
			flex: 1;

			.btn {
				margin: 25px 10px;
				border: 1px solid transparent;
				border-radius: 5px;
				line-height: 46px;
				text-align: center;
				font-weight: 500;
				font-size: $fz-l;
				color: #fff;
				background: #d1272f;

				&.hover {
					opacity: .8;
				}

				&.status {
					border: 1px solid #d1272f;
					color: #d1272f;
					background: #fff;
				}
			}
		}
	}

	/deep/ .CommonConfirmModel {
		.block {
			padding-left: 20px !important;
			padding-right: 20px !important;
			transform: none !important;

			.title {
				font-weight: 500 !important;
				font-size: 16px !important;
				color: #333 !important;
			}
		}
	}

	.form {
		/deep/ .CommonFormCreate {
			margin-top: 26px;
			margin-bottom: 21px;

			.CommonInput,
			.CommonTextarea {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 12px;

				.label {
					width: 52px;
					margin: 0;
					line-height: 20px;
					text-align: left;
					font-weight: 500;
					font-size: 12px;
					color: #333;
				}

				input,
				textarea {
					box-sizing: border-box;
					width: 162px;
					height: 25px;
					margin-left: 5px;
					border: 1px solid #e6e6e6;
					border-radius: 3px;
					line-height: 25px;
					text-align: left;
					font-weight: 500;
					font-size: 12px;
					background: #f7f7f7;
				}

				textarea {
					min-height: 72px;
					padding: 0 11px;
					line-height: 16px;
				}
			}
		}
	}
}
</style>
